<template>
        
            <section class="section-right">
                <!--colligate-->
                <section class="colligate">
                    <h4>
                        <span>综合统计</span>
                    </h4>
                    <div>
                        <dl v-for="item in listGeneral">
                            <dt v-text="item.name"></dt>
                            <dd v-text="item.num"></dd>
                        </dl>
                    </div>
                    <h4>
                        <span>支付数据</span>
                    </h4>
                    <div>
                        <dl v-for="item in listOil">
                            <dt v-text="item.name"></dt>
                            <dd v-text="item.num"></dd>
                        </dl>
                    </div>
                </section>
                <!--/colligate-->

                <!--colligate-data-->
                <section class="colligate-data">
                    <div class="cg-time">
                        <span class="active">最近7天</span>
                        <span>最近30天</span>
                    </div>
                    <div class="cg-data">
                        <input type="text" name="search_time" id="search_time" placeholder="查询时间" autocomplete="off" class="layui-input">
                        <input type="button" value="查询" class="cg-btn-green" />
                        <input type="button" value="复位" class="cg-btn-gray" />
                    </div>

                    <div class="cg-content" style="height: 430px">
                        <p id="main" class="cg-range">

                        </p>
                    </div>
                    <div class="cg-container">
                        <div class="layui-row layui-col-space22">
                            <div class="layui-col-sm4 ">
                                <h5>订单销售汇总</h5>
                                <p id="main1" class="cg-n"></p>

                            </div>
                            <div class="layui-col-sm4">
                                <h5>柴油/汽油销售总量</h5>
                                <p id="main2" class="cg-n"></p>
                            </div>
                            <div class="layui-col-sm3">
                                <h5>手机绑定分析</h5>
                                <p id="main3" class="cg-n"></p>
                            </div>
                        </div>
                    </div>
                </section>
                <!--/colligate-data-->
            </section>
</template>


<script>
import listIndex from '@/api/index.json'
var echarts=require('echarts/lib/echarts')
console.log(listIndex)

export default{
    data(){
        return {
            listGeneral:listIndex.general,
            listOil:listIndex.oil
        }
    },
    mounted(){
        this.$nextTick(function() {
            this.view()
            this.orderView()
            this.ollView()
            this.bindView()
        })
    },
    methods:{
        //销售状况
        view(){
            let Chart=echarts.init(document.getElementById('main'));
            let option = {
                    title: {
                        text: '销售状况'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data:['新增客户数量','加油站营收','客户积分总量','闪付','非油品']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['2017-5-24','2017-5-25','2017-5-26','2017-5-27','2017-5-28','2017-5-29','2017-5-30']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'新增客户数量',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:[0, 1, 1, 2, 0,0,0]
                        },
                        {
                            name:'加油站营收',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:[0, 12, 61, 34, 0,0,0]
                        },
                        {
                            name:'客户积分总量',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:[0, 22, 21, 1,0,0,0]
                        },
                        {
                            name:'闪付',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:[0,0, 0,0,0,0,0,0]
                        },
                        {
                            name:'非油品',
                            type:'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                            data:[0, 12, 20, 12, 0,0,0]
                        }
                    ]
                };
                Chart.setOption(option)
        },
        //订单销售汇总
        orderView(){
            let Chart = echarts.init(document.getElementById('main1'));
            let option = {
                    title : {
                        text: '',
                        subtext: '',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['原价总和','收入总和','优惠总和','销售总升','订单总数']
                    },
                    series : [
                        {
                            name: '汇总表',
                            type: 'pie',
                            radius : '47%',
                            center: ['50%', '70%'],
                            data:[
                                {"value":55,"name":"原价总和"},
                                {"value":"7841.84","name":"收入总和"},
                                {"value":"2233.36","name":"优惠总和"},
                                {"value":"907.16","name":"销售订单"},
                                {"value":"8740.00","name":"订单总数"}
                                ],
                    itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                    }}]};
                Chart.setOption(option);
        },
        //柴油/汽油销售总量
        ollView(){
            let Chart = echarts.init(document.getElementById('main2'));
            let option = {
                title : {
                    text: '',
                    subtext: '',
                    x:'right'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['柴油总原价','汽油总原价','柴油净收入','汽油净收入','柴油总升数','汽油总升数']
                },
                series : [{
                        name: '访问来源',
                        type: 'pie',
                        radius : '47%',
                        center: ['50%', '70%'],
                        data:[
                            {"value":"2233.36","name":"\u67f4\u6cb9\u603b\u5347\u6570"},
                            {"value":"8740.00","name":"\u67f4\u6cb9\u603b\u539f\u4ef7"},
                            {"value":"7841.84","name":"\u67f4\u6cb9\u51c0\u6536\u5165"},
                            {"value":"0.00","name":"\u6c7d\u6cb9\u603b\u5347\u6570"},
                            {"value":"0.00","name":"\u6c7d\u6cb9\u603b\u539f\u4ef7"},
                            {"value":"0.00","name":"\u6c7d\u6cb9\u51c0\u6536\u5165"}],
                itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                }
                }]
            };
            Chart.setOption(option);

        },
        //手机绑定分析
        bindView(){
            let Chart = echarts.init(document.getElementById('main3'));
            let option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['手机绑定','游客']
                },
                series: [{
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '70%'],
                    color: [ '#cccccc','#59ADF3', '#AF89D6', '#FF999A', '#FFCC67'],
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{d}%',

                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data:[
                        {"value":21,"name":"\u624b\u673a\u7ed1\u5b9a"},
                        {"value":109,"name":"\u6e38\u5ba2"}
                    ]    
                 }]
            };
            Chart.setOption(option);

        }
    }
}






</script>
